<template>
	<view class="take_init_photo">

		<FacialPhotoContainer ref="childRef"></FacialPhotoContainer>

		<view class="no_photo_title" style="flex-direction: row;align-items: center;display:flex">
			<image style="width:48rpx;height: 48rpx;"
				src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/camera/init_icon.svg"></image>
			<view class="noPhoto_title">
				人脸角度初始化
			</view>
		</view>
		<view class="remark_part">
			<view>请确保人脸正对屏幕，如考试过程中如抬</view>
			<view style="margin-top: 20rpx;">头/低头/转头被识别为舞弊的风险</view>
		</view>

		<view class="help_button">
			<u-button type="primary" color="linear-gradient(180deg, #2B5182 0%, #258FF0 100%)"
				style="display: flex;align-items: center;" @click="handlePhotoBase64">
				<view>开始验证</view>
				<view v-if="countdown > 0" class="" style="width:30rpx;">
					{{ countdown }}
				</view>
				<view v-if="countdown > 0">s</view>
			</u-button>
		</view>
	</view>
</template>

<script>
import FacialPhotoContainer from "../components/faciaPhoto/FacialPhotoContainer.vue";

export default {
	name: "FacialPhotoInitContainerPage",
	components: { FacialPhotoContainer },

	data() {
		return {
			countdown: 10,
			timer: null, // 计时器
			photoBase64: ""
		};
	},
	props: [],
	watch: {
		// 监听 countdown 属性的变化
		countdown(newValue) {
			if (newValue === 0) {
				this.handlePhotoBase64();
				// 在倒计时结束时执行相应操作
				// 在这里执行倒计时结束后的操作
			}
		}
	},
	created() {
		// 在组件创建时启动倒计时计时器
		this.startCountdown();
	},
	beforeDestroy() {
		// 在组件销毁之前清除计时器
		clearInterval(this.timer);
	},
	methods: {
		startCountdown() {
			// 使用 setInterval 启动计时器，每秒减少1秒
			this.timer = setInterval(() => {
				if (this.countdown > 0) {
					this.countdown--;
				} else {
					// 当倒计时结束时清除计时器
					clearInterval(this.timer);
					// 在这里执行倒计时结束后的操作
					console.log("倒计时结束");
				}
			}, 1000);
		},
		handlePhotoBase64() {
			this.$refs.childRef.takePhoto().then(res => {
				this.$store.commit('updateProgressData', {
					progressPhoto: 2,
					photoBase64: res
				});
			}).catch(err => {

			})
		}
	},
}
</script>

<style lang="scss">
.take_init_photo {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	.no_photo_title {
		padding: 80rpx 0px;

		.noPhoto_title {
			color: #333;
			padding-left: 15rpx;
			font-size: 16px;
			font-weight: 700;
		}
	}

	.remark_part {
		color: #333;
		text-align: center;
		font-size: 26rpx;
	}

	.help_button {
		width: 50%;
		height: 60rpx;
		margin: 400rpx 0rpx 100rpx 0rpx;
	}
}
</style>